<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    timeline: false,
    animation: false,
    fullscreenButton: false,
    // 1、底图-天空地矢量底图
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    //   url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?tk=aec9356a40c56f16beed5abb1247ae72', // 替换为你的API密钥
    //   layer: 'vec', // 矢量底图
    //   style: 'default',
    //   tileMatrixSetID: 'w', // 使用Web Mercator投影
    //   format: 'tiles',
    //   subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 服务器节点
    //   maximumLevel: 18, // 最大缩放级别
    //   credit: new Cesium.Credit('天地图矢量底图'),
    // }),

    // 2、影像底图
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: 'https://t{s}.tianditu.gov.cn/img_w/wmts?tk=aec9356a40c56f16beed5abb1247ae72', // 替换为你的API密钥
      layer: 'img', // 影像底图
      style: 'default',
      tileMatrixSetID: 'w', // 使用Web Mercator投影
      format: 'tiles',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 服务器节点
      maximumLevel: 18, // 最大缩放级别
      credit: new Cesium.Credit('天地图影像底图'), // 注记
    }),
  });

  // 3、叠加地图
  var imageryLayers = viewer.imageryLayers;
  var layer = imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?tk=aec9356a40c56f16beed5abb1247ae72', // 替换为你的API密钥
      layer: 'vec', // 矢量底图
      style: 'default',
      tileMatrixSetID: 'w', // 使用Web Mercator投影
      format: 'tiles',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // 服务器节点
      maximumLevel: 18, // 最大缩放级别
      credit: new Cesium.Credit('天地图矢量底图'),
    })
  );

  layer.alpha = 0.5; //设置图层透明度
  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
});
</script>

<style></style>
